<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>客户列表</title>
		<link rel="stylesheet" href="../asset/css/conmom.css" />
		<link rel="stylesheet" href="../asset/css/base.css" />
		<link rel="stylesheet" href="../asset/css/personCenter.css" />
	</head>
	<body>
		<div class="customerList" >
			<div class="J_tit">
				<div class="J_tit_div" >
					<div class="title"><i class="iconfont back icon-xiangzuo2" onclick="window.history.go(-1)"></i>客户列表</div>
					<div class="search-div clearfix">
						<input id="search-form-input" class="search" type="text"  placeholder="新中式" data-query-word="新中式">
						<button class="cube-acm-node">搜索</button>
					</div>
					
				</div>
			</div>
			<div class="cus-list" >
				<div class="collection-tips"> 
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">今日待发今日待发今日待发今日待发今日待发今日待发今日待发</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">今日待发今日待发今日待发今日待发今日待发今日待发今日待发</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">今日待发今日待发今日待发今日待发今日待发今日待发今日待发</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">今日待发今日待发今日待发今日待发今日待发今日待发今日待发</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
					
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">今日待发今日待发今日待发今日待发今日待发今日待发今日待发</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
					<div>
						<a>
							<div class="clearfix">
								<span class="member"><img src="http://wx.qlogo.cn/mmopen/PiajxSqBRaELHyW2YA31AWOdGVrAgHfCM5FQBq6Sicsh8J1Ep0neee5QibBS237YgXktptiaQHon5UKyVuuAkmQKMg/0"/></span>
								<span class="wz-height memName">福利来灯饰有限公司</span>
								<span class="member-number">13124354645</span>
								<i class="icon iconfont icon-xiangyou fr wz-height"></i>
								<span class="coupon-num">交易次数：1000</span>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!--客户详情-->
		<div class="customerDetailed" style="display: none;">
			<div class="J_tit">s
				<div class="J_tit_div" >
					<div class="title"><i class="iconfont back icon-xiangzuo2 withdraw"></i>
						<span>客户详情</span>
						<i class="iconfont icon Edit editInfo">&#xe602;</i></div>
				</div>
			</div>
			<div  class="customerDetailed">
				<div>
					<form>
						<div class="imgDiv">
		            		<div class="memImg">
			            		<i class="iconfont"></i>
			            		<img src="../asset/img/1.jpg" id="clientImg" style="opacity: 1;">
		            		</div>
		            		<div class="imgBottom">
		            			<div>
		            				<p>0</p>
		            				<p>交易次数</p>
		            			</div>
		            			<div>
		            				<p>0</p>
		            				<p>交易量</p>
		            			</div>
		            		</div>
		            	</div>
						<div class="infoDiv">基本信息</div>
						<table class="infoTB">
		            		<tr class="writeAble">
		            			<td>备注名</td>
		            			<td style="display: block;">福利来灯饰有限公司（华能）刘精华</td>
		            			<td style="display: none;"><input type="text" value="啦啦啦" name="clientName"></td>
		            		</tr>
		            		<tr>
		            			<td>性别</td>
		            			<td style="display: block;"></td>
		            			<td style="display: none;">
		            				<input class="sex" type="radio" name="clientSex" value="1">女
		            				<input class="sex" type="radio" name="clientSex" value="0">男
		            			</td>
		            		</tr>
		            		<tr class="writeAble">
		            			<td>年龄</td>
		            			<td style="display: block;"></td>
		            			<td style="display: none;"><input type="text" name="clientAge"></td>
		            		</tr>
		            	</table>
		            	<div class="infoDiv">联系方式</div>
						<table class="infoTB">
		            		<tr class="writeAble">
		            			<td>手机号码</td>
		            			<td style="display: block;">131232343</td>
		            			<td style="display: none;"><input type="text" value="啦啦啦" name="clientNumber"></td>
		            		</tr>
		            		<tr class="writeAble">
		            			<td>微信</td>
		            			<td style="display: block;">131232343</td>
		            			<td style="display: none;"><input type="text" value="啦啦啦" name="clientWeixin"></td>
		            		</tr>
		            		<tr class="writeAble">
		            			<td>住址</td>
		            			<td style="display: block;"></td>
		            			<td style="display: none;"><input type="text" name="clientAdders"></td>
		            		</tr>
		            	</table>
					</form>
					<button class="submit">保　存</button>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../public/jquery.min.js" ></script>
	<script>
		$(".withdraw").click(function(){
			$(".customerDetailed").hide();
			$(".customerList").show();
			if(!($(".Edit").hasClass("editInfo"))){
				edit();
			}
		});
		$(".customerList .collection-tips>div").click(function(){
			$(".customerDetailed").show();
			$(".customerList").hide();
			var src=$(this).find(".member").find("img").attr("src");
			$(".imgDiv img").attr("src",src);
			var text1=$(this).find(".memName").text();
			$(".customerDetailed .title span").text(text1);
		});
		$(document).on("click",".Edit",function(){
			if($(this).hasClass("editInfo")){
				//编辑信息
				$(this).html("&#xe629;");
				$(this).removeClass("editInfo");
				$(".infoTB tr td:nth-child(2)").css("display","none");
				$(".infoTB tr td:nth-child(3)").css("display","block");
				$(".submit").css("display","block");
			}else{
				//保存信息
				edit();
			}
		});
		function edit(){
					$(".Edit").html("&#xe602;");
					$(".Edit").addClass("editInfo");
					$(".infoTB tr td:nth-child(3)").css("display","none");
					$(".infoTB tr td:nth-child(2)").css("display","block");
					$(".submit").css("display","none");
				}
		
	</script>
</html>
